<template>
	<view>
		<view class="page">
			<comp-common v-bind="{data:data}" @getUserInfo="getUserInfo" @myLogin="myLogin" @getPhoneNumber="getPhoneNumber" @hideGetCoupon="hideGetCoupon" @closeCouponBox="closeCouponBox" @navigatorClick="navigatorClick"></comp-common>
			<comp-header v-bind="{data:data}" @relevanceError="relevanceError" @relevanceSuccess="relevanceSuccess"></comp-header>
			<view class="body after-navber">
				<view :class="['page', data.__page_classes]">
            <view class="body after-navber">
                <view class="flex-row tab-bar">
                    <view class="flex-grow-1">
                        <navigator :class="data.status==-1?'active':''" openType="redirect" url="/pages/book/order/order?status=-1">
                            <text>全部</text>
                        </navigator>
                    </view>
                    <view class="flex-grow-1">
                        <navigator :class="data.status==0?'active':''" openType="redirect" url="/pages/book/order/order?status=0">
                            <text>待支付</text>
                        </navigator>
                    </view>
                    <view class="flex-grow-1">
                        <navigator :class="data.status==1?'active':''" openType="redirect" url="/pages/book/order/order?status=1">
                            <text>待使用</text>
                        </navigator>
                    </view>
                    <view class="flex-grow-1">
                        <navigator :class="data.status==2?'active':''" openType="redirect" url="/pages/book/order/order?status=2">
                            <text>已使用</text>
                        </navigator>
                    </view>
                    <view class="flex-grow-1">
                        <navigator :class="data.status==3?'active':''" openType="redirect" url="/pages/book/order/order?status=3">
                            <text>售后</text>
                        </navigator>
                    </view>
                </view>
                <view class="order-list">
                    <view class="order-item" v-for="(item,index) in data.order_list" :key="item.id">
                        <view @tap="goToDetails" class="flex-row" :data-id="item.id">
                            <view class="goods-pic flex-grow-0">
                                <view class=" order-leabl" v-if="item.is_pay==1&&item.is_use==0&&item.apply_delete==0">待使用</view>
                                <view class=" order-leabl" v-if="item.is_pay==0&&item.is_cancel==0">待支付</view>
                                <view class=" order-leabl" v-if="item.apply_delete==1&&item.is_refund==1">已退款</view>
                                <view class=" order-leabl" v-if="item.apply_delete==1&&item.is_refund==2">拒退款</view>
                                <image :src="item.cover_pic"></image>
                            </view>
                            <view class="flex-grow-1 goods-info">
                                <view class="goods-name">
                                    {{item.goods_name}}
                                </view>
                                <view class="flex-gorw-0 flex-row money flex-y-bottom">
                                    <view class="original_price flex-grow-0">
                                        ¥ {{item.original_price}}
                                    </view>
                                    <view class="price flex-grow-0">
                                        ¥ {{item.pay_price}}
                                    </view>
                                </view>
                            </view>
                        </view>
                        <view class="btn-group flex-row" v-if="item.apply_delete!=1&&item.is_refund!=1&&item.is_comment!=1">
                            <block v-if="item.is_pay==1&&item.is_use==0&&item.apply_delete==0">
                                <view @tap="applyRefund" class="btn-group-item apply flex-x-center flex-y-cneter" :data-id="item.id" v-if="item.pay_price>0">
                                    申请退款
                                </view>
                                <view @tap="orderQrcode" class="btn-group-item promptly flex-x-center flex-y-cneter" :data-index="index">
                                    立即使用
                                </view>
                            </block>
                            <block v-if="item.is_pay==0&&item.is_cancel==0">
                                <view @tap="orderCancel" class="btn-group-item apply flex-x-center flex-y-cneter" :data-id="item.id">
                                    取消
                                </view>
                                <view @tap="orderPay" class="btn-group-item promptly flex-x-center flex-y-cneter" :data-id="item.id" :data-index="index">
                                    支付
                                </view>
                            </block>
                            <view @tap="comment" class="btn-group-item apply flex-x-center flex-y-cneter" :data-id="item.id" v-if="item.is_use==1&&item.is_comment==0&&data.__is_comment">
                                    评价
                                </view>
                        </view>
                    </view>
                    <view class="no-data-tip" v-if="data.show_no_data_tip">
                        暂无相关订单
                    </view>
                </view>
                <view @tap="hide" :class="['flex-row flex-y-center modal', data.hide==1?'hide':'']">
                    <view class="flex-y-center" style="width:100%;height:800upx;padding:100upx;">
                        <view style="background-color:#fff;width:100%;height:100%;border-radius:10upx;padding:0 50upx;">
                            <view class="flex-x-center" style="width:100%;height:50upx;margin-top:50upx;font-size:13pt;margin-bottom:20upx">核销二维码</view>
                            <image mode="aspectFit" :src="data.qrcode" style="width:450upx;height:450upx;"></image>
                        </view>
                    </view>
                </view>
            </view>
        </view>
			</view>
			<comp-footer v-bind="{data:data}"></comp-footer>
		</view>
	</view>
</template>

<script>var myVue = {};
	var e = !1, t = !1, o = 2;
	export default {
		data() {
			return {
				data: {
        hide: 1,
        qrcode: ""
    },
			};
		},
		onLoad: function(a) {myVue = this;
        myVue.getApp.page.onLoad(this, a), e = !1, t = !1, o = 2, this.loadOrderList(a.status || -1);
    },
    onReady: function(e) {
        myVue.getApp.page.onReady(this);
    },
    onShow: function(e) {
        myVue.getApp.page.onShow(this);
    },
    onHide: function(e) {
        myVue.getApp.page.onHide(this);
    },
    onUnload: function(e) {
        myVue.getApp.page.onUnload(this);
    },
    onPullDownRefresh: function(e) {
        myVue.getApp.page.onPullDownRefresh(this);
    },
    onReachBottom: function(a) {
        myVue.getApp.page.onReachBottom(this);
        var r = this;
        t || e || (t = !0, myVue.getApp.request({
            url: myVue.getApp.api.book.order_list,
            data: {
                status: r.data.status,
                page: o
            },
            success: function(t) {
                if (0 == t.code) {
                    var a = r.data.order_list.concat(t.data.list);
                    r.setData({
                        order_list: a,
                        pay_type_list: t.data.pay_type_list
                    }), 0 == t.data.list.length && (e = !0);
                }
                o++;
            },
            complete: function() {
                t = !1;
            }
        }));
    },
		methods: {
			loadOrderList: function(e) {
        void 0 == e && (e = -1);
        var t = this;
        t.setData({
            status: e
        }), myVue.getApp.core.showLoading({
            title: "正在加载",
            mask: !0
        }), myVue.getApp.request({
            url: myVue.getApp.api.book.order_list,
            data: {
                status: t.data.status
            },
            success: function(e) {
                0 == e.code && t.setData({
                    order_list: e.data.list,
                    pay_type_list: e.data.pay_type_list
                }), t.setData({
                    show_no_data_tip: 0 == t.data.order_list.length
                });
            },
            complete: function() {
                t.getApp.core.hideLoading();
            }
        });
    },
    orderCancel: function(e) {
			var _this = this;
        myVue.getApp.core.showLoading({
            title: "正在加载",
            mask: !0
        });
        var t = e.currentTarget.dataset.id;
        myVue.getApp.request({
            url: myVue.getApp.api.book.order_cancel,
            data: {
                id: t
            },
            success: function(e) {
                0 == e.code && myVue.getApp.core.redirectTo({
                    url: "/pages/book/order/order?status=0"
                });
            },
            complete: function() {
                myVue.getApp.core.hideLoading();
            }
        });
    },
    GoToPay: function(e) {
			var _this = this;
        myVue.getApp.core.showLoading({
            title: "正在提交",
            mask: !0
        }), myVue.getApp.request({
            url: myVue.getApp.api.book.order_pay,
            data: {
                id: e.currentTarget.dataset.id
            },
            complete: function() {
                myVue.getApp.core.hideLoading();
            },
            success: function(e) {
                0 == e.code && myVue.getApp.core.requestPayment({
                    _res: e,
                    timeStamp: e.data.timeStamp,
                    nonceStr: e.data.nonceStr,
                    package: e.data.package,
                    signType: e.data.signType,
                    paySign: e.data.paySign,
                    success: function(e) {},
                    fail: function(e) {},
                    complete: function(e) {
                        "requestPayment:fail" != e.errMsg && "requestPayment:fail cancel" != e.errMsg ? myVue.getApp.core.redirectTo({
                            url: "/pages/book/order/order?status=1"
                        }) : myVue.getApp.core.showModal({
                            title: "提示",
                            content: "订单尚未支付",
                            showCancel: !1,
                            confirmText: "确认",
                            success: function(e) {
                                e.confirm && myVue.getApp.core.redirectTo({
                                    url: "/pages/book/order/order?status=0"
                                });
                            }
                        });
                    }
                }), 1 == e.code && myVue.getApp.core.showToast({
                    title: e.msg,
                    image: "/static/images/icon-warning.png"
                });
            }
        });
    },
    goToDetails: function(e) {
        myVue.getApp.core.navigateTo({
            url: "/pages/book/order/details?oid=" + e.currentTarget.dataset.id
        });
    },
    orderQrcode: function(e) {
        var t = this, o = e.target.dataset.index;
        myVue.getApp.core.showLoading({
            title: "正在加载",
            mask: !0
        }), t.data.order_list[o].offline_qrcode ? (t.setData({
            hide: 0,
            qrcode: t.data.order_list[o].offline_qrcode
        }), myVue.getApp.core.hideLoading()) : myVue.getApp.request({
            url: myVue.getApp.api.book.get_qrcode,
            data: {
                order_no: t.data.order_list[o].order_no
            },
            success: function(e) {
                0 == e.code ? t.setData({
                    hide: 0,
                    qrcode: e.data.url
                }) : t.getApp.core.showModal({
                    title: "提示",
                    content: e.msg
                });
            },
            complete: function() {
                t.getApp.core.hideLoading();
            }
        });
    },
    hide: function(e) {
        this.setData({
            hide: 1
        });
    },
    applyRefund: function(e) {
        var t = e.target.dataset.id,_this = this;
        myVue.getApp.core.showLoading({
            title: "正在加载",
            mask: !0
        }), myVue.getApp.request({
            url: myVue.getApp.api.book.apply_refund,
            data: {
                order_id: t
            },
            success: function(e) {
                0 == e.code ? myVue.getApp.core.showModal({
                    title: "提示",
                    content: "申请退款成功",
                    showCancel: !1,
                    success: function(e) {
                        e.confirm && myVue.getApp.core.redirectTo({
                            url: "/pages/book/order/order?status=3"
                        });
                    }
                }) : myVue.getApp.core.showModal({
                    title: "提示",
                    content: e.msg
                });
            },
            complete: function() {
                myVue.getApp.core.hideLoading();
            }
        });
    },
    comment: function(e) {
        myVue.getApp.core.navigateTo({
            url: "/pages/book/order-comment/order-comment?id=" + e.target.dataset.id,
            success: function(e) {},
            fail: function(e) {},
            complete: function(e) {}
        });
    }
		},
	}
</script>

<style scoped>
.tab-bar {
    background: #fff;
    border-bottom: 1upx solid #e2e2e2;
    position: fixed;
    top: var(--window-top);
    left: 0;
    width: 100%;
    z-index: 1000;
    font-size: 11pt;
    color: #666666;
}

.tab-bar~.order-list {
    padding-top: 100upx;
}

.order-itme {
    border-bottom: 1upx solid #f7f7f7;
}

.tab-bar navigator {
    display: block;
    padding: 0 24upx;
    text-align: center;
}

.tab-bar navigator text {
    height: 100upx;
    line-height: 100upx;
    display: inline-block;
}

.tab-bar navigator.active text {
    color: #ff5c5c;
    border-bottom: 2upx solid #f00;
}

.tab-bar~.order-list {
    padding-top: 100upx;
}

.order-item {
    background-color: #fff;
    margin-top: 20upx;
}

.goods-pic {
    position: relative;
    margin: 24upx;
}

.order-leabl {
    position: absolute;
    left: 0;
    top: 0;
    width: 100upx;
    height: 48upx;
    font-size: 10pt;
    background-color: #ff6868;
    color: #fff;
    line-height: 48upx;
    text-align: center;
    border-radius: 8upx 0 0 0;
}

.goods-pic image {
    width: 208upx;
    height: 208upx;
    border-radius: 8upx;
}

.goods-info {
    margin: 34upx 24upx 32upx 0;
}

.goods-name {
    font-size: 11pt;
    color: #353535;
}

.money {
    margin-top: 24upx;
    justify-content: flex-end;
}

.original_price {
    text-decoration: line-through;
    color: #a4a4a4;
}

.price {
    margin-left: 24upx;
    color: #ff5444;
    font-size: 13pt;
}

.btn-group {
    border-top: 1upx solid #e2e2e2;
    padding: 24upx;
    justify-content: flex-end;
}

.btn-group-item {
    font-size: 30upx;
    height: 60upx;
    width: 180upx;
    border-radius: 30upx;
    margin-left: 16upx;
    line-height: 60upx;
}

.btn-group-item.apply {
    border: 1upx solid #c9c9c9;
    color: #666666;
    background-color: #fff;
}

.btn-group-item.promptly {
    border: 1upx solid #ff4545;
    color: #ff4544;
    background-color: #fff5f5;
}

.hide {
    display: none;
}

.modal {
    position: fixed;
    top: var(--window-top);
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.5);
    z-index: 9999;
}
</style>
